<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Cache-Control" content="max-age=172800, public, must-revalidate">

    <title>Доступные работы</title>
    <script type="text/javascript" src="../../resources/js/jquery-1.6.js"></script>
    <script src="../../resources/js/grid.locale-en.js" type="text/javascript"></script>
    <script src="../../resources/js/grid.locale-ru.js" type="text/javascript"></script>
    <script src="../../resources/js/grid.locale-ua.js" type="text/javascript"></script>
    <script src="../../resources/js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="../../resources/js/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../resources/js/jquery-ui-timepicker-addon.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="../../resources/css/start/jquery-ui-1.8.10.custom.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="../../resources/themes/start/ui.jqgrid.css"/>
<style type="text/css">
	.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
	.ui-timepicker-div dl{ text-align: left; }
	.ui-timepicker-div dl dt{ height: 25px; }
	.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
	.ui-timepicker-div td { font-size: 90%; }
	.ui-jqgrid {font-size:1.5em}
    body {
        font: 8px Arial;
    }
</style>
    <script type="text/javascript">
        $(document).ready(function() {
        	
        	$( "#dialog" ).dialog({
    			autoOpen: false,
    			show: "blind",
    			hide: "explode" 
    			//iframe:true
    		});

        	var allJobTypes = ':All';
        	var now = new Date();
        	var nowStr = ""+now.getFullYear()+"-"+(now.getMonth()+1)+"-"+now.getDate();
        	var myfilter = {
                   groupOp: "AND",
                   rules: [
                   { field: "city", op: "bw", data: "${city}" },
                   { field: "workDate", op: "ge", data: nowStr }//,
                   //{ field: "jobType", op: "eq", data: "${preferredJobType.title}"}
                    ]
                }
        	$.getJSON('/getJobTypes',{},function(data){
        		$.each(data.jobTypes,function(index,value){
        			allJobTypes = allJobTypes + ";" + value + ":" + value;	
        		})
        		
        		var grid = jQuery("#worksTable").jqGrid({
                    url:'/data/worksData?q=4',
                    datatype: 'json',
                    mtype: 'GET',
                    colNames:['№', 'Тип работы','Город', 'О работе' ,/*'Region', 'Country',*/ 'Дата','Начало', 'Конец', 'Цена','Работодатель'],
                    colModel:[
                        {name:'idWork',index:'idWork', width:55,editable:false,editoptions:{readonly:true,size:10},hidden:true,search:false},
                        {name:'jobType',index:'jobType', width:50,editable:true, editrules:{required:true}, editoptions:{size:10}, 
                        	stype:'select', edittype: 'select',
                        	searchoptions: { value: allJobTypes    }},
                       	{name:'city',index:'city', width:50,editable:true, editrules:{required:true}, editoptions:{size:10},searchoptions:{dataInit:cityPick,sopt:['cn','bw','ew','eq'],defaultValue:'${city}'}},
                       	{name:'about',index:'about', width:100,search:false},
                        //{name:'region',index:'region', width:50,editable:true, editrules:{required:true},defaultSearch:"bw", editoptions:{size:10}},
                        //{name:'country',index:'country', width:50,editable:true, editrules:{required:true},defaultSearch:"bw", editoptions:{size:10}},
                        {name:'workDate',index:'workDate', sorttype:'date', width:32,editable:true, editrules:{required:true}, editoptions:{size:10}, searchoptions:{dataInit:datePick,sopt:['ge','gt','lt','le','eq'],attr:{title:'Select Date'},defaultValue:nowStr}},
                        {name:'startTime',index:'startTime',  sorttype:'date', width:25,editable:true, editrules:{required:true},defaultSearch:"ge", editoptions:{size:10}, searchoptions:{dataInit:timePick,sopt:['ge','gt','lt','le','eq']}},
                        {name:'endTime',index:'endTime',  sorttype:'date', width:25,editable:true, editrules:{required:true},defaultSearch:"le", editoptions:{size:10}, searchoptions:{dataInit:timePick,sopt:['ge','gt','lt','le','eq']}},
                        {name:'wage',index:'wage',  sorttype:'number',width:20,editable:true, editrules:{required:true}, editoptions:{size:10},searchoptions:{sopt:['ge','gt','lt','le','eq']}},
                        {name:'employer',index:'employer', width:50,editable:true, editrules:{required:true}, editoptions:{size:10},searchoptions:{sopt:['cn','bw','ew','eq']}}
                    ],
                    postData: {
                        filters:JSON.stringify(myfilter)
                    },
                    search:true,
                    rowNum:20,
                    rowList:[20,40,60],
                    height: 745,
                    
                    autowidth: true,
                    rownumbers: true,
                    pager: '#pager',
                    sortname: 'id',
                    ondblClickRow: function(id) {
                        window.location = "/works/" + id;
                    },
                    viewrecords: true,
                    sortorder: "asc",
                    caption:"Подработки",
                    emptyrecords: "Empty records",
                    loadonce: false,
                    jsonReader:{
                    	  root: "rows",
                    	  page: "page",
                    	  total: "total",
                    	  records: "records",
                    	  repeatitems: false,
                    	  id: "0"
                    	},
                    loadComplete: function() {
                    },
                    grouping: true,
                   	groupingView : {
                   		groupField : ['idWork'],
                   		groupColumnShow : [false],
                   		groupText : ['<b>{0}</b>'],
                   		groupCollapse : false,
                		groupOrder: ['asc'],
                		groupSummary : [false],
                		groupDataSorted : false
                   	},
                    footerrow: true,
                    userDataOnFooter: true

                });
                jQuery("#chngroup").change(function(){
                	var vl = $(this).val();
                	//$("#worksTable").setGridParam({loadonce:true});
                	if(vl) {
                		//jQuery("#worksTable").jqGrid()
                		if(vl == "clear") {
                			jQuery("#worksTable").jqGrid('groupingRemove',true);
                			$("#worksTable").trigger("reloadGrid");
                		} else {
                			jQuery("#worksTable").jqGrid('groupingGroupBy',vl);
                		}
                	}
                	//$("#worksTable").setGridParam({loadonce:false});
                });
                jQuery("#worksTable").jqGrid('navGrid','#pager',{del:false,add:false,edit:false},{},{},{},{multipleSearch:true});
                jQuery("#worksTable").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
                
                $("#bsdata").click(function(){
                	jQuery("#worksTable").jqGrid('searchGrid',
                		{sopt:['cn','bw','eq','ne','lt','gt','ew']}
                	);
                });
        		
        	})
        	
            
            
        });
        
        function datePick(elem){
        	jQuery(elem).attr('readonly', 'readonly');
        	jQuery(elem).datepicker({
   			 dateFormat: "yy-mm-dd",
   	            changeMonth : true,
   	            changeYear : true,
   	            onClose: function() {
		            var sgrid = $("#worksTable")[0];
                    sgrid.triggerToolbar();
		        }
   	         });

        }


		function timePick(elem){
			jQuery(elem).attr('readonly', 'readonly');
			jQuery(elem).timepicker({
			    showSecond: false,
		        timeFormat: 'hh:mm:ss',
		        onClose: function() {
		            var sgrid = $("#worksTable")[0];
                    sgrid.triggerToolbar();
		        }
	        });
	    }

	    function cityPick(elem){
			//jQuery(elem).attr('readonly', 'readonly');
			jQuery(elem).autocomplete({
            source: function(request, response) {
                jQuery.ajax({
                    url : "/search/cities",
                    dataType : "json",
                    data : {
                        term : request.term
                        //groupId : $("#groupId").val();
                    },
                    success : function(data) {
                        response(jQuery.map(data, function(item) {
                            return {
                                label: item.ruName,
                                value: item.ruName,
                                id: item.idCity
                            }
                        }))
                    }
                })
            },
            select: function(event, ui) {
                if (ui.item) {
                    
                }
            },
            minLength : 2,
            open : function() {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function() {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            }
	    })
	    }
		
    </script>
</head>
<body>
<div style="font: 12px Arial">
<span>Сгруппировать: <select id="chngroup">
	<option value="clear">Нет</option>
	<option value="idWork">Работа</option>
	<option value="workDate">Дата</option>
	<option value="employer">Работодатель</option>
	<option value="jobType">Тип работы</option>
	<option value="city">Город</option>
</select>
</span>
    <security:authorize ifAllGranted="ROLE_EMPLOYER">
    <span style="text-align: right;">[<a href="<c:url value="/works/new" />">Создать работу</a>]</span>
        </security:authorize>
    </div>
<div>
    <div id="dialog">
    	<iframe id="iframeId" width="100%" height="100%" 
       marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto"></iframe>
    </div>
    <table id="worksTable">
    </table>
    <div id="pager" class="scroll" style="text-align:center;"></div>
</div>

</body>
</html>